<template>
    <fieldset>
        <legend>商品列表</legend>
        <div class="app">
            <div class="box1">
                编号：<input type="text" v-model="code">
                品牌名称:<input type="text" v-model="productName"><br>
                产品图片地址:<input type="text" v-model="imgSrc">
                价格：<input type="text" v-model="price">
                <input type="button" value="添加" @click="add">
            </div>
            <table class="tb">
                <tr>
                    <th>
                        <input type="checkbox" v-model="allCheck" @change="allCheckChange">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in products" :key="item.id">
                    <td>
                        <input type="checkbox" :value="item" v-model="checks">
                    </td>
                    <td>
                        <img :src="item.imgSrc" alt="" width="50" height="50">
                    </td>
                    <td>{{item.code}}</td>
                    <td>{{item.productName}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===1">-</button> 
                        &nbsp;
                        {{item.count}}
                        &nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td> 
                </tr>
            </table>
            <div class="add" v-show="!products.length" style="text-alien:center">
                没有更多数据了
            </div>
            <h1 class="add" style="text-align:right">总价格:{{total}}</h1>
        </div>
    </fieldset>
</template>
<script>

let local ={
    get(key){
        return JSON.parse(localStorage.getItem(key))
    },
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value))
    }
}
let initialData=([
            {
                id: 1,
                imgSrc: "https://www.52doutuwang.com/wp-content/uploads/2021/07/20210722162327_24213.jpg",
                code: "1122",
                productName: "吴签的签",
                count: 1,
                price: 0.01
            },
            {
                id: 2,
                imgSrc: "https://ts1.cn.mm.bing.net/th/id/R-C.edf7a1ef9fdacc6c071debc5b50dc833?rik=7rsLBtPC8o50SA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20118%2f542%2fw859h483%2f20190531%2ffdc8-hxvzhte7315115.jpg&ehk=YlmM7NGbAkW6H9blYsgEVa7CoicWQ99m%2bvYbp6fI25Q%3d&risl=&pid=ImgRaw&r=0",
                code: "1123",
                productName: "品如的衣柜",
                count: 1,
                price: 100
            }
            ])
export default{
    data(){
        return{
            code:"",//产品编号
            productName:'',//产品名称
            imgSrc:"",//产品图片地址
            price:"",//价格
            //对象中的字段 产品图片 编号 产品名称 数量 价格
            products: local.get('qf-data') ?? initialData,
            // checks选中的值
            checks:[],
            //全选的值
            allCheck:false,
        }
    },
    // 反选
    watch:{
        checks(newChecks){
            if(newChecks.length===this.products.length){
                this.allCheck = true
            }else{
                this.allCheck = false
            }
        }
    }, 
    computed:{
         // 计算总价
        total(){
           let res = this.checks.reduce((total,item)=>{
            return total += item.price * item.count
           },0) 
           return res.toFixed(2)
        }
    },
    methods:{
        // 增加按钮事件
        add(){
            // 先进行非空判断
            if(!this.code || !this.productName || !this.price ||!this.imgSrc){
                return
            }
            let obj ={
                id: Math.random().toString(32).substring(2),
                imgSrc: this.imgSrc,
                code: this.code,
                productName: this.productName,
                count: 1,
                price: this.price
            }
            this.products.push(obj)
            local.set('qf-data',this.products)
        },
        // 删除按钮事件
        del(index){
            console.log(index)
            this.products.splice(index,1)
            local.set('qf-data',this.products)
        },
        // 全选
        allCheckChange(){
            console.log(this.allCheck)
            if(this.allCheck){
                this.checks = this.products
            }else{
                this.checks = []
            }
            
        },
        // 数量-
        decrease(current){
            current.count--
        },
        // 数量+
        increase(current){
            current.count++
        }

    }
}
</script>
<style>
    .app{
        border: 2px solid;
    }
    .box1,.box2{
        border: 2px solid pink;
        width:630px;
        margin-bottom: 20px;
    }
    .box1{ 
        height:60px;
    }
    th,td{
        border: 2px solid; 
        width: 88px;
        height: 30px;
    }
    tr{
        text-align: center;
    }
    table{
       /* 合并边框线 */
       border-collapse: collapse; 
    }
    thead{
        background-color: pink;
    }
    .xs {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
    .add {
        width:630px;
        padding: 5px;
        border: 2px solid black;
        margin-bottom: 10px;
    }
    </style>